import React, { Component } from 'react';
import {PageHeader,Tabs,Tab,Form,Label,FormGroup,FormControl,Button} from 'react-bootstrap';

export class Login extends Component {
    displayName = Login.name
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <PageHeader>免费注册</PageHeader>
                <Tabs defaultActiveKey="begin" id='tablogin'>
                    <Tab eventKey="begin" title="填写账号信息">
                        <Form>
                            <FormGroup>
                                <Label>账户名</Label>
                                <FormControl type="email" placeholder="Enter email" style={{width:300}}/>
                                <Label className="text-muted">输入用户名称</Label>
                            </FormGroup>
                            <FormGroup>
                                <Label>登陆密码</Label>
                                <FormControl type="password" placeholder="Password" style={{width:300}}/>
                                <Label className="text-muted">6-20位字母或数字组成</Label>
                            </FormGroup>
                            <FormGroup>
                                <Label>确认密码</Label>
                                <FormControl type="password" placeholder="Password" style={{width:300}}/>
                                <Label className="text-muted">在输入一次密码</Label>
                            </FormGroup>
                            <FormGroup>
                                <Button type="submit" style={{width:60,height:30}}>确定</Button>
                                <Button type="button" style={{width:60,height:30,marginLeft:180}}>取消</Button>
                            </FormGroup>
                        </Form>
                    </Tab>
                    <Tab eventKey="check" title="验证账号信息">
                        <Form>
                        <FormGroup>
                                <Label>输入收到的验证码</Label>
                                <FormControl type="text" style={{width:300}}/>
                            </FormGroup>
                        </Form>
                    </Tab>
                    <Tab eventKey="login" title="注册成功">
                        <Form>
                            <Label>恭喜！注册成功</Label>
                        </Form>
                    </Tab>
                </Tabs>
            </div>
        )
    }
}